const { webpack } = require('webpack')
, { merge } = require('webpack-merge')
, common = require('./webpack.common.js')
, TARGETHOST = 'http://hxdbschool.com'
, protocol =  !!/^https/.exec(TARGETHOST)

module.exports = merge(common, {
    mode: 'development',
    module: {
        rules: [
            {
				test:/\.scss$/,
                use:['style-loader','css-loader',{
                    loader:'sass-loader',
                    options:{
                        //支持基于缩写的语法
                        sassOptions: {
                            indentedSyntax: true
                        }
                    }
                }],
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src')
            },
            {
                test: /\.less/,
                use: ['style-loader', 'css-loader',{
                    loader:'less-loader',
                    options:{
                        javascriptEnabled:true
                    }
                }],
                exclude: /node_modules/,
                include: path.resolve(__dirname, 'src')
            },
            {
                //解析字体或图片
                test:/\.(png|jpe?g|gif|svg)$/i
                ,use:[
                    {   //生产环境用url-loader,开发环境用file-loader
                        loader:'file-loader', 
                        options:{
                            publicPath: path.join(__dirname,'assets/img'),
                            limit: 200 * 1024, //小于200kb时转为base64
                            name:'[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        //https://github.com/jantimon/html-webpack-plugin#options
        new HtmlWebpackPlugin({
            title:'app template',
            filename:'index.html',//默认就是index.html,filename所在位置：output.path
            template:path.resolve(__dirname,'./src/assets/temp.html'),
            publicPath:'./public/',
            chunks:['main'],//这里指定的entry.main这个键
        }),
        //热更新插件
        new webpack.HotModuleReplacementPlugin()
    ],
    devtool: "source-map",
    devServer:{
        //指定服务器资源的根目录，如果不配置contentBase，那么contentBase默认是项目的根目录。
        contentBase:'./dist',
        //此处publicPath会覆盖output.publicPath
        //此处以output.publicPath为标准
        //publicPath:'/app/',
        host:'localhost',
        port:8080,
        https:protocol,
        proxy:{
            '/api':{
                target:TARGETHOST,
                changeOrigin:true,
                pathRewrite:{
                    '/api':''
                }
            }
        },
        //开启热更新，必要要配置热更新插件才有效果
        hot: true,
        //构建结束后，自动打开浏览器
        open:true,
        //配置项目子路径
        publicPath:'/app/',
        //启用Gzip压缩
        compress: true
    }
});